<template>
  <div class="login_bg theme_body">
    <div class="login_title">大宗建筑材料质量监管平台</div>
    <div class="login_box">
      <h1>用户登录</h1>
      <h2>—— 欢迎用户登录管理平台 ——</h2>
      <el-input size="small" placeholder="请输入手机号" v-model.trim="username">
        <i slot="prefix" class="iconfont icon-zhanghao"> </i>
      </el-input>
      <el-input size="small" show-password placeholder="请输入密码" v-model.trim="password">
        <i slot="prefix" class="iconfont icon-mima"> </i>
      </el-input>
      <el-input style="width: 50%; float: left" size="small" placeholder="请输入图形验证码" v-model.trim="code">
      </el-input>
      <img @click="getImgCode" class="img_code" :src="img" alt="" />
      <button @click="login">立&nbsp;即&nbsp;登&nbsp;录</button>
      <p class="text">
        <el-checkbox v-model.trim="checked">记住密码</el-checkbox>
        <span @click="goRetrieve"> 忘记密码？</span><em> ｜ </em><span @click="goRegister">供应商注册</span>
      </p>
    </div>
  </div>
</template>

<script>
import socketMixin from '../mixins/socketMixin'

export default {
  name: 'Login',
  components: {},
  data() {
    return {
      username: '',
      password: '',
      strCiphertext: '',
      code: '',
      checked: true,
      img: '',
      uuid: ''
    }
  },
  mixins: [socketMixin],

  methods: {
    goRetrieve() {
      this.$router.push('/retrieve')
    },
    goRegister() {
      this.$router.push('/register')
    },
    //获取图片验证码
    getImgCode() {
      this.$https({
        method: 'get',
        url: '/sys/captcha',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            this.img = res.data.image
            this.uuid = res.data.uid
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //登录
    login() {
      if (this.username == '') {
        this.$message.error('请输入用户名')
      } else if (this.password == '') {
        this.$message.error('请输入密码')
        // } else if (this.code == '') {
        //   this.$message.error('请输入图形验证码')
      } else {
        this.$https({
          method: 'post',
          url: '/sys/login',
          data: {
            loginName: this.username,
            // password: this.common.getBase64Code(this.password),
            password: this.password,
            uid: this.uuid,
            captchaCode: this.code
          }
        })
          .then(res => {
            if (res.code === 0) {
              this.$message.success('登录成功')
              this.common.setCookie('materialsToken', res.data.tokenInfo.tokenValue, 360)
              localStorage.setItem('enterpriseId', res.data.enterpriseId)
              localStorage.setItem('enterpriseName', res.data.enterpriseName)
              localStorage.setItem('userName', res.data.userName)
              localStorage.setItem('userId', res.data.tokenInfo.loginId)
              localStorage.setItem('enterpriseType', res.data.enterpriseType)
              localStorage.setItem('biddingSwitch', res.data.biddingSwitch)
              this.$store.commit('setWhetherLogin', res.data.tokenInfo.tokenValue)
              this.$store.commit('setUserName', res.data.userName)
              this.$store.commit('setUserId', res.data.tokenInfo.loginId)
              this.$store.dispatch('getMenuList')
              this.initSocket()
              this.$router.push('/')
            } else {
              this.$message.error(res.msg)
            }
            this.getImgCode()
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.login()
      }
    }
  },
  destroyed() {
    // 离开页面时销毁监听事件
    window.removeEventListener('keydown', this.keyDown, false)
  },
  mounted() {
    // 添加回车监听事件
    window.addEventListener('keydown', this.keyDown)
    this.getImgCode()
  },
  created: function () {}
}
</script>
<style scoped lang="less">
.login_title {
  text-align: center;
  width: 1200px;
  height: 80px;
  font-size: 70px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0px 9px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
  letter-spacing: 10px;
}
.login_bg {
  width: 100%;
  background: url(../assets/login_bg.png) no-repeat;
  background-size: 100% 100%;
  background-position: center 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .login_box {
    margin-top: 50px;
    width: 27.6vw;
    height: 60vh;
    min-width: 350px;
    background-color: #fff;
    box-shadow: 0px 15px 40px 3px rgba(63, 77, 100, 0.22);
    h1 {
      font-size: 1.66vw;
      text-align: center;
      color: #fa7355;
      font-weight: 500;
      margin-top: 6vh;
    }
    h2 {
      font-size: 1.04vw;
      text-align: center;
      color: #333333;
      font-weight: 500;
      line-height: 6vh;
    }

    .el-input {
      width: 80%;
      margin-left: 10%;
      margin-top: 3vh;
      i {
        font-size: 16px;
        display: inline-block;
        color: #999999;
        margin-top: 7px;
        margin-left: 5px;
        line-height: 1;
      }
    }
    button {
      width: 80%;
      margin-left: 10%;
      cursor: pointer;
      line-height: 4.5vh;
      margin-top: 4vh;
      font-size: 2vh;
      background-color: #fa7355;
      border-radius: 5px;
      color: #fff;
    }
    .text {
      width: 80%;
      margin-left: 10%;
      margin-top: 10px;
      em {
        float: right;
        color: #999;
        font-size: 14px;
        font-style: normal;
      }
      span {
        float: right;
        color: #999;
        font-size: 14px;
        cursor: pointer;
      }
      span:hover {
        color: #fa7355;
      }
    }
  }
}
.img_code {
  cursor: pointer;
  width: 25%;
  float: left;
  margin-left: 5%;
  height: 32px;
  margin-top: 3vh;
}
</style>
